﻿<!--
 * @Author: halande
 * @Description: 轮播样式设置模块
-->
<template>
  <el-form
    class="image-form"
    label-position="right"
    size="mini"
    label-width="70px"
    @submit.native.prevent
  >
    <el-form-item v-if="selectedTemplate.id === 4" label="一屏">
      <div>
        <el-radio-group v-model="showPicNum" @change="changeShowPicNum">
          <el-radio :label="3">
            3张
          </el-radio>
          <el-radio :label="4">
            4张
          </el-radio>
        </el-radio-group>
      </div>
      <div>
        <el-radio-group v-model="showPicNum" @change="changeShowPicNum">
          <el-radio :label="5">
            5张
          </el-radio>
          <el-radio :label="6">
            6张
          </el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item
      v-if="[3, 4].includes(selectedTemplate.id)"
      label="轮播"
    >
      <div>
        <el-radio-group v-model="autoplay" @change="changeAutoplay">
          <el-radio :label="0">
            无轮播
          </el-radio>
          <el-radio :label="5000">
            有轮播
          </el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item label="样式">
      <div>
        <el-radio-group v-model="shadow" @change="changeShadow">
          <el-radio :label="0">
            常规
          </el-radio>
          <el-radio :label="1">
            投影
          </el-radio>
        </el-radio-group>
      </div>
      <div v-if="shadow === 1" class="shadow-block">
        <div class="cell-color-opa">
          <div class="cell-input">
            <div class="colorPicker">
              <span style="padding-right: 3px">颜色</span>
              <el-color-picker
                v-model="shadow_color"
                color-format="rgb"
                :show-alpha="true"
                @change="changeColor"
              />
              <span class="reset-span" @click="resetColor">重置</span>
            </div>
          </div>
        </div>
        <div class="cell-input-block">
          <div class="cell-input">
            <el-input
              v-model="shadow_x"
              @change="changex"
            />
            <span>X</span>
          </div>
          <div class="cell-input">
            <el-input
              v-model="shadow_y"
              @change="changey"
            />
            <span>Y</span>
          </div>
          <div class="cell-input">
            <el-input
              v-model="shadow_blur"
              @change="changeblur"
            />
            <span>模糊</span>
          </div>
          <div class="cell-input">
            <el-input
              v-model="shadow_spread"
              @change="changespread"
            />
            <span>扩展</span>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="倒角">
      <div>
        <el-radio-group v-model="radius" @change="changeRadius">
          <el-radio :label="0">
            直角
          </el-radio>
          <el-radio :label="1">
            圆角
          </el-radio>
        </el-radio-group>
      </div>
      <div v-if="radius === 1" class="shadow-block">
        <div>圆角（半径）</div>
        <div style="padding: 10px">
          <el-slider
            v-model="radius_value"
            show-input
            @change="changeRadiusValue"
          />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="边距" class="slider-item">
      <el-slider
        v-model="contentBorder"
        :max="30"
        show-input
        @change="changeContentBorder"
      />
    </el-form-item>
    <el-form-item v-if="selectedTemplate.id === 2" label="指示器">
      <div>
        <el-radio-group v-model="indicator" @change="changeIndicator">
          <el-radio :label="1">
            样式一
          </el-radio>
          <el-radio :label="2">
            样式二
          </el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item
      v-if="[1, 3, 4].includes(selectedTemplate.id)"
      label="间隔"
      class="slider-item"
    >
      <el-slider
        v-model="imageGutter"
        :max="30"
        show-input
        @change="changeImageGutter"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import managerTool from '@/util/managerTool'

export default {
  props: {
    selectedTemplate: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      shadow: 0,
      shadow_color: 'rgba(110,127,150,0.13)',
      shadow_x: 0,
      shadow_y: 2,
      shadow_blur: 14,
      shadow_spread: 0,
      radius: 0,
      radius_value: 8,
      contentBorder: 0,
      imageGutter: 0,
      indicator: 1,
      autoplay: 0,
      showPicNum: 3,
    }
  },
  computed: {
    ...mapGetters('main', ['selectedComponent']),
  },
  mounted() {
    this.initData()
  },
  methods: {
    ...mapMutations('main', ['editComponent']),
    initData() {
      const attrs = ['shadow', 'shadow_color', 'shadow_x', 'shadow_y', 'shadow_blur',
        'shadow_spread', 'radius', 'radius_value', 'contentBorder', 'imageGutter',
        'indicator', 'autoplay', 'showPicNum'
      ]
      for (let attr of attrs) {
        this[attr] = this.selectedComponent[attr]
      }
    },
    updateComponentData(field, value) {
      const data = {
        _id: this.selectedComponent._id,
        field: field,
        value: value
      }
      this.editComponent(data)
      field !== 'swipeVisible' && this.$emit('addStep')
    },
    changeShowPicNum () {
      this.updateComponentData('showPicNum', this.showPicNum)
      // this.updateComponentData('swipeVisible', false)
      // setTimeout(() => {
      //   this.updateComponentData('swipeVisible', true)
      // }, 200)
    },
    changeAutoplay () {
      this.updateComponentData('autoplay', this.autoplay)
    },
    changeShadow () {
      this.updateComponentData('shadow', this.shadow)
    },
    changeColor () {
      this.updateComponentData('shadow_color', this.shadow_color)
    },
    resetColor () {
      this.shadow_color = '#6E7F96'
      this.changeColor('#6E7F96')
    },
    changeblur () {
      if (!managerTool.validationPositiveNum(this.shadow_blur)) {
        this.$message.error('格式不正确，只能填写大于0的数字！')
        this.shadow_blur = 14
        return
      }
      this.updateComponentData('shadow_blur', this.shadow_blur)
    },
    changex () {
      if (!managerTool.validationNum(this.shadow_x)) {
        this.$message.error('格式不正确，只能填写数字！')
        this.shadow_x = 0
        return
      }
      this.updateComponentData('shadow_x', this.shadow_x)
    },
    changey () {
      if (!managerTool.validationNum(this.shadow_y)) {
        this.$message.error('格式不正确，只能填写数字！')
        this.shadow_y = 2
        return
      }
      this.updateComponentData('shadow_y', this.shadow_y)
    },
    changespread () {
      if (!managerTool.validationPositiveNum(this.shadow_spread)) {
        this.$message.error('格式不正确，只能填写大于0的数字！')
        this.shadow_spread = 0
        return
      }
      this.updateComponentData('shadow_spread', this.shadow_spread)
    },
    changeRadius () {
      this.updateComponentData('radius', this.radius)
    },
    changeRadiusValue () {
      this.updateComponentData('radius_value', this.radius_value)
    },
    changeContentBorder () {
      this.updateComponentData('contentBorder', this.contentBorder)
      // if (this.selectedTemplate.id !== 1) {
      //   this.updateComponentData('swipeVisible', false)
      //   setTimeout(() => {
      //     this.updateComponentData('swipeVisible', true)
      //   }, 200)
      // }
    },
    changeIndicator () {
      this.updateComponentData('indicator', this.indicator)
    },
    changeImageGutter () {
      this.updateComponentData('imageGutter', this.imageGutter)
    },
  }
}
</script>

<style lang="less" scoped>
.image-form {
  margin-top: 10px;
  .shadow-block {
    padding: 6px;
    border: 1px solid #ccc;
    margin-top: 5px;
  }
  .cell-color-opa {
    display: flex;
    .colorPicker {
      display: flex;
      flex-direction: row;
    }
    .reset-span {
      padding-left: 10px;
      cursor: pointer;
      color: #409eff;
    }
  }
  .cell-input-block {
    display: flex;
    margin-top: 10px;
  }
  .cell-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10px;
    .el-input {
      width: 40px;
    }
  }
  .slider-item .el-slider {
    margin-left: 10px;
    margin-top: -4px;
  }
}
</style>